<script setup lang="ts">
import {useFileInfoStore} from "@/stores/file_info";
import {ref} from "vue";
import SvgIcon from "@/components/svg-icon/index.vue";
import {shareFileList} from "@/api/share";
import {ElMessage} from "element-plus";
import loading from "@/components/loading/index.vue"
import {useCommonStore} from "@/stores/common";
import {useUserInfoStore} from "@/stores/user_info";
import {getFileStatus} from "@/utils/textUtils";


import {getBaseServiceUrl} from "@/utils/env";

const fileInfoStore = useFileInfoStore();
let showLoading = ref(true)
const commonStore = useCommonStore();
const userStore = useUserInfoStore();
userStore.selectUserInfo()
const url = getBaseServiceUrl()

const checkAll = ref(false);
const handleCheckAllChange = (res: any) => {
  checkAll.value = res
  list.value.forEach((item: any) => {
    item.ischeck = res
    let index = commonStore.shareItemList.findIndex((i: any) => i.id == item.id)
    if (item && index == -1) {
      commonStore.shareItemList.push(item.id)
    }
  })
  if (!res) {
    commonStore.shareItemList.length = 0
  }
}
const handleCheckedCitiesChange = (id: any) => {
  let index = commonStore.shareItemList.findIndex((item: any) => item == id)
  if (index != -1) {
    commonStore.shareItemList.splice(index, 1)
  } else {
    commonStore.shareItemList.push(id)
  }
  checkAll.value = list.value.every((item: any) => item.ischeck);
}
const list = ref([]);

shareFileList().then((res: any) => {
  list.value = res.data;
  showLoading.value = false;
})

const copyLink = (item: any) => {
  let cInput = document.createElement("input");
  if (item.sharePassword) {
    cInput.value = url + "/s/" + item.id + ".html提取码:" + item.sharePassword;
  } else {
    cInput.value = url + "/s/" + item.id + ".html";
  }
  document.body.appendChild(cInput);
  cInput.select();
  document.execCommand("copy");
  ElMessage({
    type: "success",
    message: "复制成功"
  });
}
</script>

<template>
  <div class="task-layout overflowY">


    <div>
      <table style="table-layout: fixed;width: 100%;height: 40px;border-bottom: 1px solid #ccc;">
        <colgroup class="tab_column">
          <col width="5%">
          <col width="25%">
          <col width="10%">
          <col width="15%">
          <col width="10%">
          <col width="15%">
          <col width="10%">
        </colgroup>
        <thead>
        <tr>
          <th>
            <el-checkbox
                v-model="checkAll"
                @change="handleCheckAllChange"></el-checkbox>

          </th>
          <th>
            <div style="text-align: left;margin-left: 15px">
              文件
            </div>
          </th>
          <th>
            提取码
          </th>
          <th>
            分享时间
          </th>
          <th>
            预览次数
          </th>
          <th>
            状态
          </th>
          <th>
            操作
          </th>
        </tr>
        </thead>
      </table>
    </div>

    <div v-if="showLoading" class="loading">
      <loading></loading>
    </div>

    <div v-show="!showLoading">
      <div v-if="list.length>0">
        <table style="table-layout: fixed;" class="table">
          <colgroup style="width: 100%" class="tab_column">
            <col width="5%">
            <col width="25%">
            <col width="10%">
            <col width="15%">
            <col width="10%">
            <col width="15%">
            <col width="10%">
          </colgroup>
          <tbody style="width: 100%">
          <tr class="file-tree-list-item" v-for="item in list"
              :key="item.id">

            <td>
              <el-checkbox v-model="item.ischeck" @change="handleCheckedCitiesChange(item.id)"></el-checkbox>
            </td>

            <td class="file-name" :title="item.name">
              <svg-icon class="icon" style="margin-right: 10px;width: 20px;height: 20px" color="#409EFF" name="link"/>
              {{ item.fileName }}
            </td>

            <td>
              {{ item.sharePassword || "---" }}
            </td>

            <td>
              {{ item.createTime }}
            </td>

            <td>
              {{ item.lookNumber }}
            </td>

            <td>
              <p v-if="item.status == 0">正常</p>
              <p v-if="item.status == 1">已失效</p>
            </td>

            <td>
              <div v-if="item.status == 0 && getFileStatus(item.savingTime)" class="copy" @click="copyLink(item)">
                <svg-icon class="icon" style="width: 20px;height: 20px" color="#409EFF" name="link"/>
                复制链接
              </div>
              <el-tag v-else type="danger">已失效</el-tag>
            </td>

          </tr>
          </tbody>
        </table>
      </div>
      <div style="display: flex;align-items: center;flex-direction: column" v-else>
        <svg-icon name="file_no" style="width: 500px;height: 400px"></svg-icon>
        <p>还未分享过，快去分享吧</p>
      </div>
    </div>


  </div>
</template>

<style scoped lang="scss">
.task-layout {
  width: 100%;
  max-height: 700px;

  .table {
    width: 100%;

    tr {
      border-bottom: 1px solid #ccc;
    }

    td, th {
      padding: 15px;
    }

    .copy {
      color: #409EFF;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
    }
  }


  .file-tree-list-item {
    text-align: center;

    .file-name {
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .file-tree-list-item:hover {
    background-color: #FAFAFA;
  }
}
</style>